<template>
    <div>
        <!-- 轮播图区域 -->
        <mt-swipe :auto="4000">
            <!-- 谁使用此轮播图， 谁为我们传递 lunbotuList -->
            <mt-swipe-item v-for="item in lunbotuList" :key="item.img">
                 <img :src="item.img" :class="{'full': isfull}"> 
            </mt-swipe-item>
        </mt-swipe>
    </div>

    <!-- 1. 首页中的图片，宽和高已经设置了 100% 的宽度-->
    <!-- 2. 商品详情页面中，轮播图的图片 如果也使用 100% 宽，页面会变形，它期望高度 100% ， 宽度自适应-->
    <!-- 3. 解决： 可以定义一个属性 ，让使用轮播图的调用者，手动自定宽度-->
</template>

<script>
    import { Toast } from 'mint-ui'
    export default {
        props: ['lunbotuList','isfull'],
        data() {
            return {

            }
        },
        methods: {
           
        },
        created() {
        }

    }
</script>

<style lang="scss" scoped>
    .mint-swipe {
        height: 200px;
        .mint-swipe-item {
            text-align: center;
            // &:nth-child(1) {
            //     background-color: yellow;
            // }
            // &:nth-child(2) {
            //     background-color: rgb(16, 128, 148);
            // }
            // &:nth-child(3) {
            //     background-color: palevioletred;
            // }
            img {
               // width: 100%;
                height: 100%;
            }
        }
    }
    
    .full{
        width: 100%;
    }
    
</style>